<template>
  <el-dialog title="新增员工" :visible="isShowDialog" @close="cancleClick">
    <el-form :model="form" label-width="100px" ref="form" :rules="rules">
      <el-form-item label="姓名 :" prop="username">
        <el-input placeholder="1-30个字符" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="手机 :" prop="mobile">
        <el-input placeholder="请输入手机号" v-model="form.mobile"/>
      </el-form-item>
      <el-form-item label="入职时间 :" prop="timeOfEntry">
        <el-date-picker
          v-model="form.timeOfEntry"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="聘用形式 :" prop="formOfEmployment">
        <el-select placeholder="请选择" v-model="form.formOfEmployment">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号 :" prop="workNumber">
        <el-input placeholder="1-20个字符" v-model="form.workNumber"/>
      </el-form-item>
      <el-form-item label="部门 :" prop="departmentName" class="department-name-item">
        <el-input placeholder="请选择" v-model="form.departmentName" @focus="departmentNameFocus"/>
        <el-tree :data="treeData" @node-click="treeNodeClick" :props="{label:'name'}" default-expand-all
                 :expand-on-click-node="false" class="department-name-tree" v-show="isShowTree"/>
      </el-form-item>
      <el-form-item label="转正时间 :" prop="correctionTime">
        <el-date-picker
          v-model="form.correctionTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancleClick">取 消</el-button>
      <el-button type="success" @click="confirmClick">新增</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {validateMobile} from "@/utils/validate"
// 引入聘用形式的数据格式
import employees from "@/utils/constant/employees"
import {companyDepartmentApi} from "@/api/departments";
import {resetCompanyDepartmentData} from "@/utils/resetData";
import {addUserApi} from "@/api/employees";

export default {
  name: "add",
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        username: '', //姓名
        mobile: '', //手机号
        departmentName: '', //部门名称
        workNumber: '',  //工号
        timeOfEntry: '', //入职时间
        correctionTime: '', //转正时间
        formOfEmployment: ''  //聘用形式
      },
      rules: {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'},
          {min: 1, max: 30, message: '请输入1-30个字符', trigger: 'blur'}
        ],
        mobile: [
          {required: true, message: '手机号不能为空', trigger: 'blur'},
          {validator: validateMobile}
        ],
        departmentName: [
          {required: true, message: '部门名称不能为空', trigger: 'change'},
        ],
        workNumber: [
          {required: true, message: '工号不能为空', trigger: 'blur'},
        ],
        timeOfEntry: [
          {required: true, message: '入职时间不能为空', trigger: 'blur'},
        ],
        correctionTime: [
          {required: true, message: '转正时间不能为空', trigger: 'blur'},
        ],
        formOfEmployment: [
          {required: true, message: '聘用形式不能为空', trigger: 'blur'},
        ],
      },
      typeList: employees.hireType,
      treeData: [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      //  是否显示tree下拉
      isShowTree: false
    }
  },
  methods: {
    //取消按钮
    cancleClick() {
      this.$emit('update:isShowDialog', false)
      // 清空表单
      this.form = {
        username: '', //姓名
        mobile: '', //手机号
        departmentName: '', //部门名称
        workNumber: '',  //工号
        timeOfEntry: '', //入职时间
        correctionTime: '', //转正时间
        formOfEmployment: ''  //聘用形式
      }
      this.$refs.form.resetFields()
    },
    //  部门表单获取焦点事件
    departmentNameFocus() {
      this.isShowTree = true
      this.getTreeData()
    },
    // 获取部门tree结果数据
    async getTreeData() {
      const {depts} = await companyDepartmentApi()
      this.treeData = resetCompanyDepartmentData(depts, '')
    },
    //tree节点被点击时
    treeNodeClick(item) {
      // console.log(item)
      this.form.departmentName = item.name
      this.isShowTree = false
    },
    // 新增按钮
    confirmClick() {
      this.$refs.form.validate( async isPass => {
        if (isPass) {
          //  校验通过
          const res = await addUserApi(this.form)
        //  提示用户新增成功
          this.$message.success('新增成功')
        //  关闭新增面板
          this.cancleClick()
        //  重新渲染页面结构
          this.$emit('updateUserList')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.department-name-item {
  position: relative;
  width: 400px;

  .department-name-tree {
    width: 100%;
    position: absolute;
    top: 100%;
    margin-top: 5px;
    z-index: 3;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
}
</style>
